import { reactive, ref, watch } from 'vue'
// import { add, del, update, all } from '@/api/menu'
import { FormRules } from 'element-plus'
export interface Tree{
  Id?: Number
  Pid: Number // 父id  id=0为父 不为0为子
  Path?: string // 路由路径
  Name?: string // 路由名称
  Status: String // 1开放 2关闭
  App: String // 应用名称
  IsMenu: String // 是否是菜单 1 是 2不是
  Title: string // 路由标题 (唯一可改)
  Icon: String
  Children?:Tree[]
}

export const getMenu = () => {
  const app = '运营中心'
  const init:Array<Tree> = []
  const menus = ref(init)
  const rules = reactive<FormRules>({
    Title: [
      { required: true, message: '请选择标题', trigger: 'blur' },
      { min: 2, max: 20, message: '长度范围:2~20', trigger: 'blur' }
    ],
    Path: [
      { required: true, message: '请选择路由路径', trigger: 'blur' },
      { min: 3, max: 25, message: '长度范围:3~25', trigger: 'blur' }
    ],
    Name: [
      { required: true, message: '请选择路由名称', trigger: 'blur' },
      { min: 3, max: 25, message: '长度范围:3~25', trigger: 'blur' }
    ]
  })
  const menuInit:Tree = {
    Pid: 0,
    Path: '',
    Name: '',
    Status: '1',
    App: app,
    IsMenu: '2',
    Title: '',
    Icon: ''
  }
  const menu = ref(menuInit)
  const menuProps = {
    label: 'Title',
    children: 'Children'
  }

  const initMenu = () => {
    menu.value = menuInit
  }
  // // 获取菜单
  // const getMenus = () => {
  //   // menus.value = menuData
  //   all(app).then((res:any) => {
  //     menus.value = res
  //   }).catch((res) => {

  //   })
  // }
  // // 新增
  // const addMenu = () => {
  //   add(menu.value).then((res) => {
  //     console.log('success:')
  //   }).catch((res) => {

  //   })
  // }
  // // 修改
  // const updateMenu = () => {
  //   update(menu.value).then((res) => {

  //   }).catch((res) => {

  //   })
  // }
  // // 删除
  // const delMenu = () => {
  //   del(menu.value.Id).then((res) => {

  //   }).catch((res) => {

  //   })
  // }
  let flag = 1
  watch(() => menus.value, (oldValue, newValue) => {
    // 会触发两次
    if (flag === 2) {
      // 请求接口保存
      flag = 1 // 还原
    }
    flag++
  }, { deep: true })

  return {
    menus,
    // getMenus,
    // addMenu,
    // updateMenu,
    // delMenu,
    initMenu,
    menu,
    rules,
    menuProps
  }
}
